<template>
  <div>
    <el-descriptions class="margin-top" title="员工信息" :column="3" border>
      <template #extra>
        <el-button type="primary" @click="$router.back()">返回</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Picture />
            </el-icon>
            Avatar
          </div>
        </template>
        <el-image style="width: 40px; height: 40px" :src="userInfo.avatar" :preview-src-list="srcList" fit="cover"></el-image>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            Name
          </div>
        </template>
        {{ userInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Postcard />
            </el-icon>
            Email
          </div>
        </template>
        {{ userInfo.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Location />
            </el-icon>
            Place
          </div>
        </template>
        四川
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            Remarks
          </div>
        </template>
        <el-tag size="small">唱</el-tag>
        <el-tag size="small">跳</el-tag>
        <el-tag size="small">rap</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <office-building />
            </el-icon>
            Address
          </div>
        </template>
        成都锦城学院
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Timer />
            </el-icon>
            入职时间
          </div>
        </template>
        {{ formatTime }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, toRef } from '@vue/runtime-core'
import { initUserInfo } from '@/type/userInfo'
import $http from '@/request/http'
import { useRoute, useRouter } from 'vue-router'
import { User, Postcard, Location, Tickets, OfficeBuilding, Timer, Picture } from '@element-plus/icons-vue'
const $route = useRoute()
const $router = useRouter()

const data = reactive(new initUserInfo())
onMounted(async () => {
  const { data: res } = await $http.get('/api/employees/userinfo/' + $route.params.id)
  data.userInfo = res
  srcList.push(res.avatar)
})
const userInfo = toRef(data, 'userInfo')
const srcList: string[] = reactive([])

const formatTime = computed(() => {
  const dt = new Date(userInfo.value.date)
  let y = dt.getFullYear()
  let m = dt.getMonth() + 1
  let d = dt.getDate()
  return `${y}-${m}-${d}`
})
</script>

<style scoped lang="less">
.el-tag {
  margin-right: 5px;
}
</style>
